<%--
  Created by IntelliJ IDEA.
  User: 10330
  Date: 2021/7/9
  Time: 15:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/header.jsp"%>

<script>
    $(document).ready(function(){
        $("#${param.action}Row").attr('class','list-group-item active');
        $("#${param.action}").show();
        if ('${sessionScope.get("_LOGIN_USER_").user_sex}' === '0'){
            $('#sex1UserCenter').attr("checked",true);
        }
        else {
            $('#sex2UserCenter').attr("checked",true);
        }
    });
</script>

<div class="col-md-2">
    <div class="row">
        <ul  class="list-group"  id="left_cate">
            <a id="userInformationRow" href="${pageContext.request.contextPath}/pages/user/userCenter.jsp?action=userInformation" class="list-group-item">修改个人信息</a>
            <a id="userPasswordChangeRow" href="${pageContext.request.contextPath}/pages/user/userCenter.jsp?action=userPasswordChange" class="list-group-item">修改密码</a>
            <a id="userDeliveryAddressRow" href="${pageContext.request.contextPath}/user?action=getUserDeliveryAddress" class="list-group-item">管理收货地址</a>
        </ul>
    </div>
</div>

<form id="userInformation" role="form" style="display:none">
    <div class="modal-body" style="text-align: left;margin-left: 18%">

        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name="username" value="${sessionScope.get("_LOGIN_USER_").user_name}" readonly>
        </div>
        <div class="form-group">
            <label for="userSexUserCenter"> 性别 </label>
            <div class="radio" id="userSexUserCenter">
                <label>
                    <input type="radio" name="userSex" id="sex1UserCenter" value="0"> 男
                </label>
                <label>
                    <input type="radio" name="userSex" id="sex2UserCenter" value="1"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label>年龄</label>
            <input type="text" class="form-control" name="age" value="${sessionScope.get("_LOGIN_USER_").user_age}">
        </div>

        <div class="form-group">
            <label>邮箱</label>
            <input type="text" class="form-control" name="email" value="${sessionScope.get("_LOGIN_USER_").user_email}">
        </div>

    </div>
    <div class="modal-footer" style="text-align: left;margin-left: 18%">

        <button class="btn btn-primary" type="button" onclick="userInformationSubmit()">提交</button>

    </div>
</form>

<script>
    function userInformationSubmit(){
        $.post("${pageContext.request.contextPath}/user?action=userInformation",$('#userInformation').serialize(),
            function(result){
                if(JSON.parse(result).updateInformation===true){
                    $("#msgTitle").html("修改成功");
                    $("#msgBody").html('');
                    $("#msgModal").modal();
                }
                else{
                    $("#msgTitle").html("修改失败");
                    $("#msgBody").html(JSON.parse(result).msg);
                    $("#msgModal").modal();
                }
            });
    }
</script>

<form id="userPasswordChange" role="form" method="post" style="display:none">
    <div class="modal-body" style="text-align: left;margin-left: 18%">

        <div class="form-group">
            <label>旧密码</label>
            <input type="password" class="form-control" name="oldPassword"/>
        </div>
        <div class="form-group">
            <label>新密码</label>
            <input type="password" class="form-control" name="newPassword"/>
        </div>
        <div class="form-group">
            <label>确认密码</label>
            <input type="password" class="form-control" name="newPasswordConfirm"/>
        </div>

    </div>
    <div class="modal-footer" style="text-align: left;margin-left: 18%">

        <button class="btn btn-primary" type="button" onclick="userPasswordSubmit()">提交</button>

    </div>
</form>

<script>
    function userPasswordSubmit(){
        $.post("${pageContext.request.contextPath}/user?action=userPasswordChange",$('#userPasswordChange').serialize(),
            function(result){
                if(JSON.parse(result).updatePassword===true){
                    $("#msgTitle").html("修改成功");
                    $("#msgBody").html('');
                    $("#msgModal").modal();
                }
                else{
                    $("#msgTitle").html("修改失败");
                    $("#msgBody").html(JSON.parse(result).msg);
                    $("#msgModal").modal();
                }
            }
        );
    }
</script>

<div id="userDeliveryAddress" style="text-align: left;margin-left: 18%;display: none">

    <button class="btn btn-primary" type="button" onclick="
            $('#myAddressModalAddressId').val('');
            $('#myAddressModalAddressProvince').val('');
            $('#myAddressModalAddressCity').val('');
            $('#myAddressModalAddressArea').val('');
            $('#myAddressModalAddressContent').val('');
            $('#myAddressModalAddressReceiver').val('');
            $('#myAddressModalAddressTel').val('');
            " data-toggle="modal" data-target="#myAddressModal">添加收货地址</button>

    <div class="row" style="font-weight: bold">
        <div class="col-md-12">
            <div class="col-md-4">
                <div class="col-md-7">省·市·区</div>
                <div class="col-md-5">街道</div>
            </div>
            <div class="col-md-1">收件人</div>
            <div class="col-md-2">电话</div>
            <div class="col-md-4">
                <div class="col-md-4">默认地址</div>
                <div class="col-md-8">操作</div>
            </div>
            <div class="col-md-11">
                <hr/>
            </div>
        </div>

        <div style="font-weight: normal">
            <c:forEach items="${requestScope.get('addressList')}" var="address" varStatus="status">

                <div id="${status.index}address" class="col-md-12" style="height: 50px">
                    <div class="col-md-4">
                        <div class="col-md-7">${address.addr_province}&nbsp;${address.addr_city}&nbsp;${address.addr_area}</div>
                        <div class="col-md-5">${address.addr_content}</div>
                    </div>
                    <div class="col-md-1">${address.addr_receiver}</div>
                    <div class="col-md-2">${address.addr_tel}</div>
                    <div class="col-md-4">
                        <div class="col-md-4">
                            <c:if test="${address.addr_isdefault == 1}">
                                默认地址
                            </c:if>
                        </div>
                        <div class="col-md-8">
                            <a href="#" onclick="
                                    $('#myAddressModalAddressId').val('${address.addr_id}');
                                    $('#myAddressModalAddressProvince').val('${address.addr_province}');
                                    $('#myAddressModalAddressCity').val('${address.addr_city}');
                                    $('#myAddressModalAddressArea').val('${address.addr_area}');
                                    $('#myAddressModalAddressContent').val('${address.addr_content}');
                                    $('#myAddressModalAddressReceiver').val('${address.addr_receiver}');
                                    $('#myAddressModalAddressTel').val('${address.addr_tel}');
                                    " data-toggle="modal" data-target="#myAddressModal">修改</a>
                            <a href="#" onclick="$('#addressId').val(${address.addr_id});$('#addressIndex').val(${status.index})" data-toggle="modal" data-target="#myDeleteTipsModal">删除</a>
                            <a href="${pageContext.request.contextPath}/user?action=defaultUserDeliveryAddress&addressID=${address.addr_id}">设为默认地址</a>
                        </div>
                    </div>
                </div>

            </c:forEach>
        </div>

    </div>

    <div class="modal fade" id="myDeleteTipsModal" tabindex="-1" role="dialog" aria-labelledby="myDeleteTipsModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myDeleteTipsModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    <input id="addressIndex" type="hidden">
                    <input id="addressId" type="hidden">
                    确定要删除？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="userDeliveryAddressDelete()">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myAddressModal" role="dialog" aria-hidden="true" aria-labelledby="myAddressModalLabel">
        <form role="form" id="myAddressForm">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                        <h4 class="modal-title" id="myAddressModalLabel" style="text-align: left">添加 / 修改收货地址</h4>
                    </div>
                    <div class="modal-body">

                        <div class="row">

                            <input id="myAddressModalAddressId" name="myAddressModalAddressId" type="hidden">

                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <div class="form-group" style="text-align: left">
                                        <label>省:<input id="myAddressModalAddressProvince" name="myAddressModalAddressProvince" type="text" class="form-control" style="font-weight: normal"></label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" style="text-align: left">
                                        <label>市:<input id="myAddressModalAddressCity" name="myAddressModalAddressCity" type="text" class="form-control" style="font-weight: normal"></label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <div class="form-group" style="text-align: left">
                                        <label>区:<input id="myAddressModalAddressArea" name="myAddressModalAddressArea" type="text" class="form-control" style="font-weight: normal"></label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" style="text-align: left">
                                        <label>街道:<input id="myAddressModalAddressContent" name="myAddressModalAddressContent" type="text" class="form-control" style="font-weight: normal"></label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <div class="form-group" style="text-align: left">
                                        <label>收件人:<input id="myAddressModalAddressReceiver" name="myAddressModalAddressReceiver" type="text" class="form-control" style="font-weight: normal"></label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" style="text-align: left">
                                        <label>电话:<input id="myAddressModalAddressTel" type="text" name="myAddressModalAddressTel" class="form-control" style="font-weight: normal"></label>
                                    </div>
                                </div>
                            </div>

                        </div>


                    </div>
                    <div class="modal-footer">

                        <button class="btn btn-primary" type="button" onclick="userDeliveryAddress()">提交</button>
                        <button class="btn btn-default" type="button" data-dismiss="modal">关闭窗口</button>

                    </div>
                </div>
            </div>
        </form>
    </div>

</div>
<script>
    function userDeliveryAddress(){
        $.post("${pageContext.request.contextPath}/user?action=addOrUpdateUserDeliveryAddress",$('#myAddressForm').serialize(),
            function (){
                window.location.href="${pageContext.request.contextPath}/user?action=getUserDeliveryAddress";
            }
        );
    }
    function userDeliveryAddressDelete(){
        let index = $('#addressIndex').val();
        let addressId = $('#addressId').val();
        $("#"+index+"address").hide();
        $.post("${pageContext.request.contextPath}/user?action=deleteUserDeliveryAddress",{addressID:addressId});
    }
</script>

<%@include file="/pages/common/footer.jsp"%>